<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="__PUBLIC__/wechat/css/global.css" />
    <link rel="stylesheet" href="__PUBLIC__/wechat/css/main.css" />
    <title>优惠券</title>
</head>
<body class="bg_f5f5f5">
    <div class="coupon">
        <div class="box coupon_nav">
            <div class="box_flex1 on" data-href="div1">已领卡券</div>
            <div class="box_flex1" data-href="div2">赠送卡券</div>
            <div class="box_flex1" data-href="div3">已使用</div>
            <div class="box_flex1" data-href="div4">未使用</div>
        </div>
        <div class="tab_content">
            <ul class="coupon_ul" id="div1">
                <li class="coupon_li">
                    <div class="box">
                        <img src="__PUBLIC__/wechat/images/head.jpg" alt="图片" class="coupon_li_img" />
                        <div class="box_flex1">
                            <p class="coupon_tit">中华保险9折券</p>
                            <p class="coupon_detail">用于在智驾平台购买中华保险车险产品，即日起至 2015年12月31日</p>
                        </div>
                    </div>
                    <div class="box coupon_ope">
                        <div class="box_flex1">200张</div>
                        <a href="coupon_detail.html" class="box_flex1 coupon_a">详情</a>
                        <a href="coupon_get.html" class="box_flex1 coupon_a">赠送</a>
                    </div>
                </li>
            </ul>


            <ul class="coupon_ul hide" id="div2">
                <li class="coupon_li">
                    <div class="box">
                        <img src="__PUBLIC__/wechat/images/head.jpg" alt="图片" class="coupon_li_img" />
                        <div class="box_flex1">
                            <p class="coupon_tit">中华保险9折券</p>
                            <p class="coupon_detail">用于在智驾平台购买中华保险车险产品，即日起至 2015年12月31日</p>
                        </div>
                    </div>
                    <div class="box coupon_ope">
                        <div class="box_flex1 coupon_number">100张</div>
                        <a href="coupon_detail.html" class="box_flex1 coupon_a" style="width: 50%;">详情</a>
                    </div>
                </li>
            </ul>


            <ul class="coupon_ul hide" id="div3">
                <li class="coupon_li">
                    <div class="box">
                        <img src="__PUBLIC__/wechat/images/head.jpg" alt="图片" class="coupon_li_img" />
                        <div class="box_flex1">
                            <p class="coupon_tit">中华保险9折券</p>
                            <p class="coupon_detail">用于在智驾平台购买中华保险车险产品，即日起至 2015年12月31日</p>
                        </div>
                    </div>
                    <div class="box coupon_ope">
                        <div class="box_flex1 coupon_number">200张</div>
                        <a href="coupon_detail.html" class="box_flex1 coupon_a" style="width: 50%;">详情</a>
                    </div>
                </li>
            </ul>


            <ul class="coupon_ul hide" id="div4">
                <li class="coupon_li">
                    <div class="box">
                        <img src="__PUBLIC__/wechat/images/head.jpg" alt="图片" class="coupon_li_img" />
                        <div class="box_flex1">
                            <p class="coupon_tit">中华保险9折券</p>
                            <p class="coupon_detail">用于在智驾平台购买中华保险车险产品，即日起至 2015年12月31日</p>
                        </div>
                    </div>
                    <div class="box coupon_ope">
                        <div class="box_flex1">200张</div>
                        <a href="coupon_detail.html" class="box_flex1 coupon_a">详情</a>
                        <a href="coupon_get.html" class="box_flex1 coupon_a">赠送</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    
    
</body>
</html>
<script type="text/javascript" src="__PUBLIC__/wechat/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/wechat/js/public.js"></script>
<script type="text/javascript">
    $(".coupon_nav>.box_flex1").on("click", function() {
        var hrefs = $(this).attr("data-href");
        $(".coupon_nav>.box_flex1").removeClass("on");
        $(".tab_content>ul").hide();
        $(this).addClass("on"); 
        $("#"+hrefs).show();
    });
</script>